<template>
    <view class="order-main">
        <span class="title-order">我的订单</span>
        <div class="line"></div>
        <div class="box-wrap">
            <div
                v-for="(item, idx) in commListData"
                :key="idx"
                class="box-small"
                @click="
                    () => {
                        handleClick(item)
                    }
                "
            >
                <div class="title-row">
                    <image
                        class="icon"
                        src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f"
                        mode="scaleToFill"
                    />
                </div>
                <div class="community-name">{{ item.name }}</div>
            </div>
        </div>
    </view>
</template>
  
<script setup lang="ts">
interface ICommList {
    name: string
    key: number
    img: string
    path?: string
}
const commListData: ICommList[] = [
    {
        name: '社区商店',
        key: 0,
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f'
    },

    {
        path: '/activityPages/order/my-share-order',
        name: '共享预约',
        key: 2,
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f'
    },
    {
        path: '/activityPages/convenience/my-convenience-order',
        name: '便民服务',
        key: 3,
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f'
    },
    {
        name: '资助消费',
        key: 4,
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f'
    },
    {
        path: '/activityPages/activity/my-activity',
        name: '活动预约',
        key: 5,
        img: 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F7ca894c5-b38d-47c9-a715-b00ca5a10ab4%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1703918822&t=b3172621c8b1db8bf89188243adc977f'
    }
]
function handleClick(item: ICommList) {
    if (item.path) {
        uni.navigateTo({
            url: item.path
        })
    }
}
// import CardHead from './compoents/card-head/'
</script>
  
<style lang="scss" scoped>
.order-main {
    height: 130px;
    width: 100%;
    border-radius: 8px;
    background: #fff;
    .title-order {
        color: #333;
        height: 38px;
        font-size: 15px;
        padding-left: 10px;
        display: inline-block;

        line-height: 38px;
    }
    .line {
        width: 100%;
        height: 1px;
        background: #f5f0f0;
    }
    .box-wrap {
        display: flex;
        margin-top: 10px;
        padding-left: 10px;
        padding-right: 10px;
        box-sizing: border-box;
        justify-content: space-between;
        .box-small {
            display: flex;
            align-items: center;
            flex-direction: column;
            justify-content: center;
            .title-row {
                .icon {
                    width: 24px;
                    height: 24px;
                }
            }
            .community-name {
                font-size: 14px;
            }
        }
    }
}
//  .minePage{
//    min-height: 100vh;
//    width: 100%;
//    background: #f7f5f5;
//  }
</style>